<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件--组件选项</title>
</head>
<body>
<div id="app">
    a:{{a}}<br/>
    <!--❌
    a_1:{{a_1}}<br/>
    b_1:{{b_1}}<br/>
    -->
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
    <com-d></com-d>
    <com-e></com-e>
    <com-f></com-f>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>

    Vue.component('com-a', {
        // 也可以定义变量
        data() {
            return {
                a_1: 1
            }
        },
        // template就是组件显示的内容
        template: '<div>我是组件A,变量的值是：{{a_1}}</div>'
    })

    Vue.component('com-b', {
        data() {
            return {
                b_1: 2
            }
        },
        template: '<div>我是组件B,变量的值是：{{b_1}}</div>'
    })

    // 有问题的写法，template中只能有一个根节点
    Vue.component('com-c', {
        template: '<b>我是组件C</b><i>我是组件C</i>'
    })
    Vue.component('com-d', {
        template: '<div><b>我是组件C</b><i>我是组件C</i></div>'
    })
    Vue.component('com-e', {
        template: `
            <div>
                <b>我是组件E</b>
                <i>我是组件E</i>
            </div>
        `
    })

    Vue.component('com-f', {
        data() {
            return {
                f_1: 1
            }
        },
        methods: {
            fun_a() {
                this.f_1++
            }
        },
        template:`
          <div>
            <label>{{ f_1 }}</label>
            <button @click="fun_a">点击我+1</button>
          </div>
        `
    })
    new Vue({
        el: '#app',
        data: {
            a: 99
        }
    })
</script>